<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>帮助反馈</p>
			<p @click="handleSubmit">提交</p>
		</div>
		<div class="feeback-content" >
			<div class="feeback-list">
				<div class="list-tab">
					<span :class="feed ? 'active' : ''" @click="handleFeesback">意见反馈</span>
					<span :class="feed ? '' : 'active'" @click="handleFeesback">投诉</span>
				</div>
			</div>
			<div class="feeback-box" v-if="feed">
				<textarea placeholder="请详细描述您的问题或意见~" class="text" v-model="texts" @change="changeText" maxlength="400"></textarea>
				
				<p>还可以输入{{num - texts.length}}字</p>
			</div>
			
			<div class="complaint-content" v-else>
				<textarea placeholder="请输入您要投诉的内容~" class="text" v-model="texts2" @change="changeTexts" maxlength="200"></textarea>
				<p>{{texts2.length}}/200</p>
				<div class="img-list">
					<div class="imgs2"v-if="imgs!=''">
						<img :src="imgs"/>
						<img class="cancel" src="../../../assets/images/cancel.png" @click="deletes"/>
					</div>
					<div class="imgs" v-else>			 
						<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
						  <img src="../../../assets/images/upload.png"/>
						</van-uploader>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import { Uploader } from 'vant';
	export default{
		data(){
			return{
				feed : true,
				texts : '',
				num : 400,
				texts2 : '',
				num2 : 200,
				imgs : '',
				arr:[]
			}
		},
		
		created(){
			
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			[Uploader.name]:Uploader
		},
		methods:{
			//返回
			handleBack(){
				var feedback = plus.webview.currentWebview();
				plus.webview.close(feedback);
			},
			//点击意见反馈
			handleFeesback(){
				this.feed = !this.feed
			},
			//意见
			changeText (e){
				this.texts = e.target.value;
			},
			//投诉
			changeTexts(e){
				this.texts2 = e.target.value;
			},
			//图片
			onRead(file){
			   this.imgs = file.content;
			},
			//删除图片
			deletes(){
				this.imgs = '';
			},
			
			handleSubmit(){
				var {texts ,texts2,feed,imgs} = this;
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				if(feed == true){
					if(texts == ''){
						plus.nativeUI.toast('请输入内容');
						return
					}
					axios.post(user.src + '/index/Feedback/feedback' , {
						userid: userId,
						desc: texts
					})
					.then(function (res) {
						var res = res.data;
						if(res.status == 200){
							plus.nativeUI.toast('提交成功~');
							setTimeout(()=>{
								var feedback = plus.webview.currentWebview();
								plus.webview.close(feedback);	
							},500)
						}else{
							plus.nativeUI.toast('反馈失败~');
						}
						
					})
					.catch(function (error) {
					   
					});
				}else{
					if(texts2 == ''){
						plus.nativeUI.toast('请输入内容');
						return
					}
					axios.post(user.src + '/index/Feedback/complaints' , {
						userid: userId,
						desc: texts2,
						img : imgs
					})
					.then(function (res) {
						var res = res.data;
						if(res.status == 200){
							plus.nativeUI.toast('提交成功~');
							imgs = '';
							var feedback = plus.webview.currentWebview();
							plus.webview.close(feedback);

						}else{
							plus.nativeUI.toast('提交失败~');
						}
					})
					.catch(function (error) {
					   
					});
				}
			}
		}
	}
	
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;

	}

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		overflow:hidden;
					
		.left-icon{
			float: left;
			width: 90px;
			
			img{
				display: block;
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			margin-left: 198px;
			float: left;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			float: right;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.feeback-content{
		padding-top: 130px;
		background: #fff;
		
		.feeback-list{
			padding: 15px 70px;
			border-bottom: 1px solid #eeeeee;
			
			.list-tab{
				/*overflow: hidden;*/
				height: 60px;
				border: 1px solid #00a2ff;
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				span{
					/*float: left;*/
					/*width: 289px;*/
					flex-grow:1;
					height: 60px;
					line-height: 60px;
					font-size: 25px;
					color: #00a2ff;
					text-decoration: none;
					text-align: center;
				}
				.active{
					color: #fff;
					background: #00a2ff;
				}
			}
		}
		.feeback-box{
			padding: 21px 32px;
			.text{
				display: block;
				padding-bottom: 21px;
				height: 584px;
				width: 100%;
				border: none;
				font-size: 27px;
				color: #999;
				line-height: 44px;
				outline:none;
				resize: none;
			}
			p{	
				font-size: 22px;
				line-height: 24px;
				color: #999;
				text-align: right;
			}
		}
		
		.complaint-content{
			padding: 21px 32px 270px 32px;
		
			.text{
				display: block;
				padding-bottom: 21px;
				height: 255px;
				width: 100%;
				border: none;
				font-size: 27px;
				color: #999;
				line-height: 44px;
				outline:none;
				resize: none;
			}
			p{	
				font-size: 22px;
				line-height: 24px;
				color: #999;
				text-align: right;
			}
			
			.img-list{
				display: flex;
				padding: 118px 0 130px 0;
					
				.imgs{
					position: relative;
					margin-right: 30px;
					width: 148px;
					height: 146px;
					border-radius: 10px;
					
					img{
						display: block;
						width: 100%;
						height: 100%;
					}
					
					.cancel{
						position: absolute;
						top: 0;
						right: 0;
						width: 28px;
						height: 26px;
					}
					
					input{
						width: 100%;
						height: 100%;
						position: absolute;
			            left: 0px;
			            top: 0px;
			            opacity: 0;
			            -ms-filter: 'alpha(opacity=0)';
					}
				}
				.imgs2{
					position: relative;
					margin-right: 30px;
					width: 148px;
					height: 146px;
					border-radius: 10px;
					
					img{
						display: block;
						width: 100%;
						height: 100%;
					}
					
					.cancel{
						position: absolute;
						top: 0;
						right: 0;
						width: 28px;
						height: 26px;
					}
					
					input{
						width: 100%;
						height: 100%;
						position: absolute;
			            left: 0px;
			            top: 0px;
			            opacity: 0;
			            -ms-filter: 'alpha(opacity=0)';
					}
				}
			}
		}		
	}
	
	
</style>